<template>
  <view class="chart-container">
    <view class="battery-container">
      <view
        class="battery-circle"
        :style="{
          borderColor: props.innerRingColor,
        }"
      >
        <!-- 注水效果 -->
        <view
          class="water-fill"
          :style="{
            height: fillHeight,
            background: props.fillBgColor,
          }"
        >
        </view>
        <!-- 中间内容 -->
        <view class="battery-content">
          <view class="battery-icon">
            <image src="/static/lightning.png" mode="" />
          </view>

          <view class="battery-percentage">
            <text class="battery-percentage-name">{{ batteryPercentage }}</text>
            <text class="battery-percentage-icon">%</text>
          </view>
          <view class="battery-soc">{{ title }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from "vue";
const props = defineProps({
  innerRingColor: {
    type: String,
    default: "#28a745",
  },
  waterFillBg: {
    type: String,
    default: "linear-gradient(to top, #1b523c, #adb2b6)",
  },
  // 注水效果是否随百分比变化
  isAutoHeight: {
    type: Boolean,
    default: true,
  },
  batteryPercentage: {
    type: Number,
    default: 0,
  },
  title: {
    type: String,
    default: "SOC",
  },

  // 注水背景色

  fillBgColor: {
    type: String,
    default: "linear-gradient(180deg, #0F1F2F 2%, #34C759 86%)",
  },
});

const fillHeight = computed(() => {
  return props.isAutoHeight ? props.batteryPercentage + "%" : "100%"; // 直接使用百分比控制高度
});
</script>

<style scoped lang="scss">
/* 外层蓝色边框 */
.battery-container {
  border-radius: 10rpx;
  box-shadow: 0 0 30px 15px rgba(15, 31, 47, 4); /* 光晕 */
  width: 370rpx;
  height: 370rpx;
  border: 1rpx solid #007bff;
  border-radius: 50%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  box-sizing: border-box; /* 确保边框不占用额外空间 */
  margin: 60rpx auto 55rpx;
  /* 绿色圆圈 */
  .battery-circle {
    width: 330rpx;
    height: 330rpx;
    border: 10px solid #28a745;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-sizing: border-box; /* 确保边框不占用额外空间 */

    /* 注水效果 */
    .water-fill {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 200%;
      height: 0;
      transition: height 0.5s ease;
      z-index: 1;
      overflow: hidden;
      // background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0 20 Q 25 30, 50 20 T 100 20 V 100 H 0 Z" fill="rgba(255,255,255,0.3)"/></svg>');
      // background-size: 50% 100%;
      // animation: waveAnimation 3s linear infinite;
    }

    /* 中间内容 */
    .battery-content {
      text-align: center;
      z-index: 2; /* 确保内容在注水效果上方 */
      .battery-icon {
        width: 25rpx;
        height: 35rpx;
        margin: 0 auto;
        image {
          width: 100%;
          height: 100%;
        }
      }
      .battery-percentage {
        font-size: 24px;
        font-weight: bold;
        color: #333;
        margin: 30rpx 0;
        .battery-percentage-name {
          font-family: D-DIN;
          font-size: 51rpx;
          font-weight: bold;
          color: #ffffff;
        }
        .battery-percentage-icon {
          margin-left: 10rpx;
          font-family: D-DIN;
          font-size: 43rpx;
          font-weight: bold;
          color: #ffffff;
        }
      }

      .battery-soc {
        font-family: Alibaba PuHuiTi 3;
        font-size: 32rpx;
        font-weight: 500;
        font-variation-settings: "opsz" auto;
        color: #ffffff;
      }
    }
  }
}

/* 波浪动画 */
@keyframes waveAnimation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>
